<template>
	<view>
		<u-popup v-model="showPrivacypolicy" mode="bottom" :mask-close-able="false" :border-radius="15" @close="close">
			<view class="popupWrapper">
				<view class="title">隐私政策</view>
				<view class="text">感谢您信任并使用{{sitename}}!</view>
				<view class="text">我们十分重视您的个人信息和隐私保护。为了更好的保障您的个人权益，请您仔细阅读并同意 <span
						@click="showAgreement('agreement')">《用户协议》</span>和
					<span @click="showAgreement('privacy')">《隐私政策》</span>以便我们向您提供更全面和优质的服务!
				</view>
				<view class="text">另外，我们为了确保业务功能的正常实现，请您知晓 <span @click="handleOpenPrivacyContract">{{ privacyContractName }}</span> 。</view>
				<view class="text">
					点击同意表示您已阅读并认可所有条款!
				</view>
				<view class="btns">
					<button class="btn_refuse" @click="refuse">拒绝</button>
					<button class="btn_agree" @click="agree">同意并继续</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: ['sitename', 'privacyContractName'],
		data() {
			return {
				showPrivacypolicy: false
			}
		},
		methods: {
			open() {
				this.showPrivacypolicy = true
			},
			close() {
				this.showPrivacypolicy = false
			},
			showAgreement(alias) {
				uni.navigateTo({
					url: '/commonViews/Agree?alias=' + alias
				})
			},
			agree() {
				this.showPrivacypolicy = false
				uni.setStorageSync('showPrivacypolicy', false)
			},
			refuse() {
				this.showPrivacypolicy = false
				this.$emit('openRefusePrivacypolicy', true)
			},
			handleOpenPrivacyContract() {
				// 打开隐私协议页面
				wx.openPrivacyContract({
					success: () => {}, // 打开成功
					fail: () => {}, // 打开失败
					complete: () => {}
				})
			}
		}
	}
</script>

<style lang="scss" scope>
	.popupWrapper {
		box-sizing: border-box;
		padding: 40rpx 30rpx 30rpx;

		.title {
			font-size: 30rpx;
			font-weight: bold;
			margin-bottom: 24rpx;
		}

		.text {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 24rpx;
			text-align: justify;

			span {
				color: #6799ff;
			}
		}

		.btns {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 50rpx;

			.btn_refuse {
				width: 34%;
				height: 80rpx;
				line-height: 80rpx;
				border: none;
				color: #333;
				background: #f6f6f6;
				font-size: 30rpx;

				&::after {
					border: none;
				}
			}

			.btn_agree {
				border: none;
				width: 61%;
				color: #fff;
				background: #3f7eff;
				font-size: 30rpx;
				height: 80rpx;
				line-height: 80rpx;

				&::after {
					border: none;
				}
			}
		}
	}
</style>